<template>
  <div>
    <van-nav-bar
      :z-index="999"
      :fixed="true"
      left-arrow
      @click-left="onClickLeft"
      :placeholder="true"
      title="修改手机号"
    ></van-nav-bar>

    <div class="changePhone">
      <van-cell-group>
        <van-field placeholder="请输入手机号" v-model="value" type="tel">
          <template #left-icon>
            <div>
              <img
                class="left-icon"
                src="../../../assets/images/shouji.png"
                alt
              />
            </div>
          </template>
        </van-field>
      </van-cell-group>

      <!-- 验证码 -->
      <van-cell-group>
        <van-field v-model="auth" type="tel" placeholder="请输入验证码">
          <template #left-icon>
            <div>
              <img
                class="left-icon"
                src="../../../assets/images/shouji.png"
                alt
              />
            </div>
          </template>
          <template #button>
            <van-button round size="small" type="primary" @click="sendCode">
              {{ isRun ? `${runTime}s后重新获取` : `获取验证码` }}
            </van-button>
          </template>
        </van-field>
      </van-cell-group>

      <div @click="alter" class="authcode-btn">确认修改</div>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
import { Toast } from "vant";
import { securityCode, alterPhone } from "../../../assets/js/api/user";
export default {
  name: "changePhone",
  data() {
    return {
      value: "",
      isRun: false,
      runTime: 60,
      auth: ""
    };
  },

  methods: {
    // 修改密码
    alter() {
      // 验证手机号
      if (!/^1[3-9]\d{9}$/.test(this.value)) {
        Dialog.alert({
          message: "手机号码有误"
          // theme: "round-button"
        }).then(() => {
          // on close
        });
        return;
      }
      if (this.auth == "") {
        Toast("验证码不能为空");
        return;
      }

      let obj = {
        newPhone: this.value,
        code: this.auth
      };
      // console.log(obj);
      alterPhone(obj).then(res => {
        console.log(res);
        if (res.code == 505) {
          Toast("该号码已注册");
        }
        if (res.code == 0) {
          Dialog.alert({
            message: "修改成功，请重新登录"
            // theme: "round-button"
          }).then(() => {
            localStorage.removeItem("token");
            sessionStorage.removeItem("token");
            localStorage.removeItem("img");
            localStorage.removeItem("userName");
            this.$router.push({ name: "AuthCode" });
          });
        }
      });
    },

    // 验证码
    sendCode() {
      // 发送验证码
      if (this.isRun) return;
      if (!/^1[3-9]\d{9}$/.test(this.value)) {
        Dialog.alert({
          message: "手机号码有误"
          // theme: "round-button"
        }).then(() => {
          // on close
        });
        return;
      }
      // 服务器发送验证码
      securityCode(this.value).then(res => {
        console.log(res);

        // 服务器发送验证码
        if (res.code == 0) {
          Dialog.alert({
            message: "验证码" + res.msg
            // theme: "round-button"
          }).then(() => {
            // on close
            this.auth = res.msg;
          });
        }
        // alert("验证码" + res.msg);
        // this.auth = res.msg;
      });

      //   // 填写倒计时

      // });
      this.isRun = true;
      this.autoTimer = setInterval(() => {
        if (this.runTime == 0) {
          this.runTime = 60;
          this.isRun = false;
          clearInterval(this.autoTimer);
          return;
        }
        this.runTime--;
      }, 1000);
    },

    onClickLeft() {
      this.$router.go(-1);
    }
  },
  components: {
    [Dialog.Component.name]: Dialog.Component
  },
  created() {
    let dsBridge = require("dsbridge");
    dsBridge.call("goBack", "", function() {
      history.go(-1);
    });
  }
};
</script>

<style></style>
